<template lang="pug">
  .siderMenuWrapper()
    .siderMenuItem(v-for="item in menus" :key="item.name" :class="{ active: isActive(item) }" @click="routeHandle(item)")
      .title
        span
          | {{item.meta.title}}
          i.el-icon-right(v-if="isActive(item)")
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      channel: process.env.VUE_APP_CHANNEL
    }
  },
  computed: {
    ...mapGetters(['addRoutes']),
    menus () {
      const { addRoutes } = this
      let menus = []
      this.$route.matched.find(x => {
        console.log(x)
        if (x.meta.group) {
          menus = addRoutes.find(item => item.path === x.path).children.filter(x => !x.hidden)
        }
      })
      return menus
    }
  },
  methods: {
    isActive (item) {
      return this.$route.path.includes(item.path)
    },
    routeHandle (item) {
      console.log(item)
      this.$router.push(item.path)
    }
  }
}
</script>
<style lang="scss" scoped>
.siderMenuWrapper{
  position: absolute;
  right: 100%;
  top: 0;

  .siderMenuItem{
    position: relative;

    + .siderMenuItem{
      margin-top: 10px
    }

    &.active{
      .title {
        background: $--app-sideMenuBg-active;
        background-size: 100% 100%;
        span {
          color: $--app-light-color;
        }
      }

      &::before{
        border-color: #AACD22
      }
    }

    .title {
      position: relative;
      z-index: 2;
      width: 65px;
      height: 85px;
      background: $--app-sideMenuBg;
      background-size: 100% 100%;
      text-align: center;
      cursor: pointer;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;

      span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 36px;
        font-size: 15px;
        font-family: PingFang SC;
        line-height: 20px;
        color: #FFFFFF;
        transform: translate(-50%, -50%);
      }
    }

    // &::before{
    //   content: '';
    //   display: block;
    //   box-sizing: content-box;
    //   position: absolute;
    //   width: 6px;
    //   height: 6px;
    //   border-radius: 50%;
    //   background: #fff;
    //   border: 5px solid #d5d5d5;
    //   top: -14px;
    //   left: 50%;
    //   margin-left: -8px;
    //   z-index: 1;
    // }
  }
}
</style>
